<template>
  <el-container style="height: 100%">
    <el-header height="350px">
      <el-table :data="all_pick" highlight-current-row @current-change="loadDetails" stripe height="100%">
        <el-table-column
          v-for="column in pick_task_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, pick_task_define)
            }
          "
        />
        <el-table-column :width="140" label="操作">
          <template #default="scope">
            <el-button size="small" @click="find_loc(scope.row)">找货</el-button>
            <el-button size="small" @click="print(scope.row)" type="primary">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="details" stripe height="100%">
        <el-table-column
          v-for="column in mtl_call_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, mtl_call_define)
            }
          "
        />
        <el-table-column
          :width="100"
          prop="store_loc"
          label="货位"
          :formatter="
            (row, column, cellValue, index) => {
              return locFormatter(row)
            }
          "
        />
        <el-table-column
          :width="200"
          prop="reserv_info"
          label="预留信息"
          :formatter="
            (row, column, cellValue, index) => {
              return reservFormatter(row)
            }
          "
        />
        <el-table-column :width="140" label="操作">
          <template #default="scope">
            <el-button size="small" @click="print2(scope.row)">打印</el-button>
            <el-button size="small">过账</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { mtl_call_define, pick_task_define } from '@/meta/index'
import { onMounted, ref } from 'vue'
import { fill_ref_info, cell_formatter, distinct } from '@/utils/common'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useDbStore } from '@/stores/modules/database'
import type { mtl_call, pick_task } from '@/types/billdata'
import { e_call_status, e_code_prefix, e_pick_status } from '@/types/enum'
import copy from 'copy-to-clipboard'
import { get_reserv_from_order } from '@/utils/reservHelper'
const router = useRouter()
const dbStore = useDbStore()
const all_pick = ref<pick_task[]>()
const details = ref<mtl_call[]>()
const mtl_loc: { mtl: string; loc: string }[] = []
const locFormatter = (val: mtl_call) => {
  const materialcode = typeof val.material === 'string' ? val.material : val.material.code
  return distinct(mtl_loc.filter((r) => r.mtl === materialcode).map((r) => r.loc)).join(',')
}
const reservFormatter = (val: mtl_call) => {
  const r = get_reserv_from_order(val.srcbill)
  if (!r) return ''
  let formatStr = `共预留${r.h}套，其中`
  r.t.forEach((x) => {
    formatStr += `${x.type}${x.qty}套`
  })
  return formatStr
}
const print = (val: pick_task) => {
  copy(e_code_prefix.拣货单 + val.billcode)

  ElMessageBox.alert('条码已复制到剪切板', '提示')
}
const print2 = (val: mtl_call) => {
  copy(e_code_prefix.拣货单行 + val.billcode)

  ElMessageBox.alert('条码已复制到剪切板', '提示')
}
const find_loc = (val: pick_task) => {
  details.value!.forEach((res) => {
    const materialcode = typeof res.material === 'string' ? res.material : res.material.code
    if (mtl_loc.find((r) => r.mtl === materialcode)) return
    dbStore.qrcode
      .filter((r) => (typeof r.material === 'string' ? r.material : r.material.code) === materialcode)
      .forEach((r) => {
        const loc = typeof r.location === 'string' ? r.location : r.location.code
        mtl_loc.push({ mtl: materialcode, loc: loc })
      })
  })
  loadDetails(val)
}
const loadDetails = (val: pick_task) => {
  const mtlc = dbStore.mtl_call.filter((r) => r.pick === val.billcode && r.status >= e_call_status.已下派)
  fill_ref_info(mtlc, mtl_call_define)
  details.value = mtlc
}

onMounted(() => {
  const p = dbStore.pick.filter((r) => r.status === e_pick_status.发放)
  fill_ref_info(p, pick_task_define)
  all_pick.value = p
  if (p.length > 0) loadDetails(p[0])
})
</script>
<style scoped></style>
